<template>
  <div>
    <div class="book-cards" v-for="p in 3">
      <div class="book-card">
        <div class="content-wrapper">
          <img src="https://assets.fontsinuse.com/static/use-media-items/95/94294/full-2000x3056/5d56c6b1/cg%201.jpeg?resolution=0" alt="" class="book-card-img">
          <div class="card-content">
            <div class="book-name">The Travellers</div>
            <div class="book-by">by Regina Porter</div>
            <div class="rate">
              <fieldset class="rating book-rate">
                <input type="checkbox" id="star-c11" name="rating" value="5">
                <label class="full" for="star-c11"></label>
                <input type="checkbox" id="star-c12" name="rating" value="4">
                <label class="full" for="star-c12"></label>
                <input type="checkbox" id="star-c13" name="rating" value="3">
                <label class="full" for="star-c13"></label>
                <input type="checkbox" id="star-c14" name="rating" value="2">
                <label class="full" for="star-c14"></label>
                <input type="checkbox" id="star-c15" name="rating" value="1">
                <label class="full" for="star-c15"></label>
              </fieldset>
              <span class="book-voters card-vote">1.987 voters</span>
            </div>
            <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
          </div>
        </div>
        <div class="likes">
          <div class="like-profile">
            <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
          </div>
          <div class="like-profile">
            <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
          </div>
          <div class="like-name"><span>Adam</span> and<span> Kimberly</span> like this</div>
        </div>
      </div>

      <div class="book-card">
        <div class="content-wrapper">
          <img src="https://images-na.ssl-images-amazon.com/images/I/71PL7BiZ5NL.jpg" alt="" class="book-card-img">
          <div class="card-content">
            <div class="book-name">Stay And Fight</div>
            <div class="book-by">by Lucy Parker</div>
            <div class="rate">
              <fieldset class="rating book-rate">
                <input type="checkbox" id="star-c1" name="rating" value="5">
                <label class="full" for="star-c1"></label>
                <input type="checkbox" id="star-c2" name="rating" value="4">
                <label class="full" for="star-c2"></label>
                <input type="checkbox" id="star-c3" name="rating" value="3">
                <label class="full" for="star-c3"></label>
                <input type="checkbox" id="star-c4" name="rating" value="2">
                <label class="full" for="star-c4"></label>
                <input type="checkbox" id="star-c5" name="rating" value="1">
                <label class="full" for="star-c5"></label>
              </fieldset>
              <span class="book-voters card-vote">1.987 voters</span>
            </div>
            <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
          </div>
        </div>
        <div class="likes">
          <div class="like-profile">
            <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
          </div>
          <div class="like-profile">
            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
          </div>
          <div class="like-name"><span>Samantha William</span> and<span> Jonathan</span> like this</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LocationView"
}
</script>

<style scoped>
.book-card{
  border-radius: 10px;
}
</style>
